<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--字典类型-->
      <el-col :span="10">
        <el-card shadow="never">
          <!--卡片头-->
          <div slot="header" class="clearfix">
            <span class="card-header-text">字典类型</span>
          </div>
          <CommonTable ref="dictTypeTable" :qo="qo" :baba="this" :row-click="handleRowClick">
            <!-- 查询参数 -->
            <template slot="filterItems">
              <el-form-item label="关键字" prop="keyword">
                <el-input v-model.trim="qo.keyword" clearable />
              </el-form-item>
            </template>
            <!-- 列表头 -->
            <template slot="column">
              <el-table-column label="编码" prop="code" />
              <el-table-column label="名称" prop="name" />
              <el-table-column label="修改日期" prop="lastUpdated" />
            </template>
          </CommonTable>
        </el-card>
      </el-col>

      <!--字典-->
      <el-col :span="14">
        <el-card shadow="never">
          <!--卡片头-->
          <div slot="header" class="clearfix">
            <span class="card-header-text">字典</span>
          </div>
          <div v-show="!dictQo.typeCode" class="click-type-text">
            点击字典类型查询字典
          </div>
          <div v-show="dictQo.typeCode">
            <CommonTable ref="dictTable" :qo="dictQo" :baba="this" get-data-fun="getDictData" top-button-position="DICT_TOP" single-row-button-position="DICT_ROW">
              <!-- 查询参数 -->
              <template slot="filterItems">
                <el-form-item label="字典类型" prop="typeCode">
                  <el-input v-model.trim="dictQo.typeCode" disabled />
                </el-form-item>
                <el-form-item label="关键字" prop="keyword">
                  <el-input v-model.trim="dictQo.keyword" clearable />
                </el-form-item>
              </template>
              <!-- 列表头 -->
              <template slot="column">
                <el-table-column label="序号" prop="seq" />
                <el-table-column label="名称" show-overflow-tooltip prop="name" />
                <el-table-column label="字典值" prop="val" />
                <el-table-column label="固定">
                  <template slot-scope="{ row }">
                    {{ row.fixed ? '是' : '否' }}
                  </template>
                </el-table-column>
                <el-table-column label="修改日期" prop="lastUpdated" />
              </template>
            </CommonTable>
          </div>
        </el-card>
      </el-col>

    </el-row>

    <DictTypeForm ref="dictTypeForm" :baba="this" />
    <DictForm ref="dictForm" :baba="this" />
  </div>
</template>

<script>
import { listDictType, deleteDictType, list, deleteDict } from '@/api/system/dict'
import DictTypeForm from './dictTypeForm'
import DictForm from './dictForm'
import CommonTable from '@/components/CommonTable'
export default {
  name: 'Dict',
  components: { CommonTable, DictTypeForm, DictForm },
  data() {
    return {
      qo: { keyword: '' },
      dictQo: { keyword: '', typeCode: '' }
    }
  },
  created() {
  },
  methods: {
    getData(qoPro) {
      return listDictType(qoPro)
    },
    createDictType() {
      this.$refs.dictTypeForm.createOpen()
    },
    updateDictType(row) {
      this.$refs.dictTypeForm.updateOpen(row.id)
    },
    handleDelete(row) {
      this.$confirm('确认删除此字典类型?', '提示', {
        type: 'warning'
      }).then(() => {
        const ld = this.$loading()
        deleteDictType(row.id).then(res => {
          this.$message.success('删除成功')
          ld.close()
          this.$refs.dictTypeTable.listData()
        })
      }).catch(() => {})
    },
    handleRowClick(row) {
      this.dictQo.typeCode = row.code
      this.$refs.dictTable.search()
    },
    getDictData(qoPro) {
      return list(qoPro)
    },
    createDict() {
      if (this.dictQo.typeCode) {
        this.$refs.dictForm.createOpen(this.dictQo.typeCode)
      } else {
        this.$message.error('请先点击字典类型')
      }
    },
    updateDict(row) {
      if (row.fixed) {
        this.$message.error('固定字典不可修改')
      } else {
        this.$refs.dictForm.updateOpen(row.id)
      }
    },
    handleDeleteDict(row) {
      if (row.fixed) {
        this.$message.error('固定字典不可删除')
      } else {
        this.$confirm('确认删除此字典?', '提示', {
          type: 'warning'
        }).then(() => {
          deleteDict(row.id).then(res => {
            this.$notify.success('删除成功')
            this.$refs.dictTable.listData()
          })
        }).catch(() => {})
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.card-header-text {
  font-weight: bold;color: #303133;
  font-size: 15px;
}
.click-type-text{
  font-size: 15px;
}
</style>
